{include file="base/_meta" /}
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body layui-row">
            <form id="modelAuthForm" lay-filter="modelAuthForm" class="layui-form model-form">
                <input name="id" type="hidden" value="{$data.id}"/>

                <div class="layui-col-md7">

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">文章名称</label>
                        <div class="layui-input-block">
                            <input name="title" placeholder="请输入" type="text" class="layui-input"
                                   lay-verType="tips" lay-verify="required" required autocomplete="off"
                                   value="{$data.title}"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">作者</label>
                        <div class="layui-input-block">
                            <input name="arthur" placeholder="请输入" type="text" class="layui-input"
                                   lay-verType="tips" autocomplete="off"
                                   value="{$data.arthur|default=$admin.nickname}"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">来源</label>
                        <div class="layui-input-block">
                            <input name="source" placeholder="请输入" type="text" class="layui-input"
                                   lay-verType="tips" autocomplete="off"
                                   value="{$data.source}"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">关键词</label>
                        <div class="layui-input-block">
                            <input name="keywords" placeholder="关键词" type="text" class="layui-input"
                                   lay-verType="tips" autocomplete="off"
                                   value="{$data.keywords}"/>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">SEO简介 | 文章摘要</label>
                        <div class="layui-input-block">
                            <textarea name="desc" placeholder="请输入内容" class="layui-textarea">{$data.desc}</textarea>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">文章内容</label>
                        <div class="layui-input-block">
                            <textarea name="content" placeholder="请输入内容" class="layui-textarea" id="container" >{$data.content}</textarea>
                        </div>
                    </div>

                </div>

                <div class="layui-col-md4 layui-col-md-offset1">

                    <div class="layui-form-item">
                        <label class="layui-form-label">选择分类</label>
                        <div class="layui-input-block">
                            <select name="article_cate_id" lay-verify="required">
                                {volist name="cate" id="voCate"}
                                <option value="{$voCate.id}" {eq name="$data.article_cate_id" value="$voCate.id"}selected{/eq}>{:str_repeat('|—&nbsp;',$voCate.level)}&nbsp;{$voCate.name}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">缩略图</label>
                        <div class="layui-input-block">
                            <div class="layui-upload-drag" id="img_thumb">
                                {notempty name="$data.img_thumb"}
                                <img src="{$data.img_thumb}" alt="{$data.title}" width="100%">
                                {else /}
                                <i class="layui-icon"></i>
                                <p>直接上传，或将文件拖拽到此处,此处无需裁剪</p>
                                {/notempty}

                            </div>
                        </div>
                        <label for="" class="layui-form-label" style="padding: 0;margin-top: 5px;">
                            <button type="button" class="layui-btn" id="uploadImgThumb" style="width: 100%;">裁剪上传</button>
                        </label>
                        <div class="layui-input-block" style="margin-top: 5px;">
                            <input type="text" name="img_thumb" value="{$data.img_thumb}" id="img_thumb_input" class="layui-input" placeholder="手动上传或输入网址" autocomplete="off">
                        </div>

                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">添加时间</label>
                        <div class="layui-input-block">
                            <input name="create_time" type="text" class="layui-input" id="create_time"
                                   lay-verType="tips" autocomplete="off"
                                   value="{$data.create_time}"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input name="sort" type="number" class="layui-input"
                                   lay-verType="tips" autocomplete="off"
                                   value="{$data.sort|default='0'}"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">置顶</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_top" value="0" title="不置顶" {neq name="$data.is_top" value="1"}checked{/neq}>
                            <input type="radio" name="is_top" value="1" title="置顶" {eq name="$data.is_top" value="1"}checked{/eq}>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">显示</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_show" value="yes" title="显示" {neq name="$data.is_show" value="no"}checked{/neq}>
                            <input type="radio" name="is_show" value="no" title="隐藏" {eq name="$data.is_show" value="no"}checked{/eq}>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">标签</label>
                        <div class="layui-input-block">
                            <input name="tags" placeholder="回车确定" type="text" class="layui-input" id="tags"
                                   lay-verType="tips" autocomplete="off"
                                   value="{$tags}"/>
                        </div>
                    </div>


                    <div class="layui-form-item text-right">
                        <button class="layui-btn layui-btn-fluid" lay-filter="*" lay-submit>保存</button>
                    </div>

                </div>



            </form>
        </div>
    </div>
</div>
{include file="base/_script" /}
<!-- 配置文件 -->
<script type="text/javascript" src="/static/lib/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/lib/ueditor/ueditor.all.js"></script>

<script>
    layui.use(['layer', 'form','upload','tagsInput','laydate','admin'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            ,upload = layui.upload
            ,tagsInput = layui.tagsInput
            ,laydate = layui.laydate
            ,admin = layui.admin;

        // 标签实例化
        $('#tags').tagsInput({
            defaultText:"请输入",
            // 回退键可删除已添加的标签
            removeWithBackspace:true,
            skin: 'tagsinput-default',
            autocomplete_url:"{:url('/article/autocompleteTags')}",
        });

        // 富文本编辑器实例化
        var ue = UE.getEditor('container',{
            initialFrameHeight:500,
            initialFrameWidth:'100%',
            //关闭字数统计
            wordCount:false,
            //关闭elementPath
            elementPathEnabled:false,
        });

        // 时间实例化
        laydate.render({
            elem:"#create_time",
            type:"datetime",
            {empty name="$data.create_time"}
                value:"{:date('Y-m-d H:i:s')}"
            {/empty}
        })

        form.on('submit(*)', function (data) {
            // 获取编辑器html内容
            // var html = ue.getContent();
            // data.field.content = html;

            $.post("{:url('/article/articleSave')}", data.field, function (ret) {
                if (ret.code == 0) {
                    layer.msg(ret.msg, {icon: 6, time: 1500}, function () {
                        admin.closeThisTabs();
                    })
                } else {
                    layer.msg(ret.msg, {icon: 5, time: 1500})
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        // 缩略图
        upload.render({
            elem: '#img_thumb' //绑定元素
            ,url: "{:url('/system/uploads')}" //上传接口
            ,done: function(res){
                console.log(res)
                //上传完毕回调
                if (res.code == 0){
                    $("#img_thumb").html("<img src='"+res.data.src+"' width='100%'>")
                    $("#img_thumb_input").val(res.data.src)
                } else{
                    layer.msg(res.msg,{icon:5,time:1500})
                }
            }
        });
        $("#img_thumb_input").bind("input propertychange",function(event){
            $("#img_thumb").html("<img src='"+$("#img_thumb_input").val()+"' width='100%'>")
        })

        // 图片裁剪
        $("#uploadImgThumb").click(function () {
            admin.cropImg({
                aspectRatio: 1/1,
                imgSrc: $("#img_thumb_input").val(),
                onCrop: function (res) {
                    $("#img_thumb_input").val(res)
                    $("#img_thumb").html("<img src='"+$("#img_thumb_input").val()+"' width='100%'>")
                    // 返回的res是base64编码的裁剪后的图片
                    // layer.msg('<img src="' + res + '" width="220px" height="220px"/>');
                }
            });
        })
    })
</script>
</body>
</html>
